<template>
  <div class="city">
    <my-head
      :title="
        $route.query.name ? '当前城市 - ' + $route.query.name : '城市选择'
      "
    ></my-head>
    <van-search
      v-model="keyword"
      show-action
      placeholder="输入城市名或拼音"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div class="city-box" v-if="toggle">
      <div class="hot">
        <p class="name">热门城市</p>
        <div class="hot-list">
          <div
            class="hot-item"
            @click="chooseCity(l)"
            v-for="(l, i) in hotCity"
            :key="i"
          >
            {{ l.name }}
          </div>
        </div>
      </div>
      <van-index-bar
        :index-list="pylist"
        sticky
        z-index="10000"
        :sticky-offset-top="46"
      >
        <div v-for="(l, i) in pylist" :key="i">
          <van-index-anchor :index="l" />
          <!-- cityList 过滤 选出 字母A B C  -->
          <van-cell
            @click="chooseCity(item)"
            :title="item.name"
            v-for="(item, index) in cityList.filter(
              (val) => val.pinyin.indexOf(l.toLowerCase()) == 0
            )"
            :key="index"
          />
        </div>
      </van-index-bar>
    </div>
    <div class="search-box" v-else>
      <div v-if="slist.length > 0">
        <van-cell
          v-for="(l, i) in slist"
          :key="i"
          :title="l.name"
          @click="chooseCity(l)"
        />
      </div>
      <div v-else class="nodata">
        <van-empty description="没有找到匹配的城市" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      slist: [], // 搜索到城市列表数据
      toggle: true,
      pylist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        // "U",
        // "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  // 路由守卫 没有选择城市不让你离开 必须选择城市
  //   beforeRouteLeave(to, from, next) {
  //     if (this.city) {
  //       next();
  //     } else {
  //       next(false); // 不能离开
  //       this.$toast("请去定位选择你的所在城市");
  //     }
  //   },
  methods: {
    onSearch(value) {
      console.log("onSearch- 123");
      console.log(value);
      // 过滤
      this.toggle = false; // 显示搜索的内容
      this.slist = this.cityList.filter(
        (item) =>
          item.name.indexOf(value) > -1 || item.pinyin.indexOf(value) > -1
      );
    },
    onCancel() {
      console.log("onCancel- 999");
      this.toggle = true;
      this.slist = [];
      this.keyword = "";
    },
    chooseCity(city) {
      console.log(city);
      this.changeCity(city); // 存储全局的当前城市信息
      this.$router.back();
    },
  },
  mounted() {
    this.getCityListAsync();
  },
};
</script>

<style lang="scss" scoped>
.city {
  ::v-deep .van-index-anchor {
    background-color: #f4f4f4;
    // color: #797d82;
  }
  .hot {
    width: 100%;
    padding: 15px;
    .name {
      font-size: 13px;
      color: #797d82;
      margin-bottom: 10px;
    }
    .hot-list {
      display: flex;
      flex-wrap: wrap;
      .hot-item {
        width: calc(33.33333vw - 11px);
        text-align: center;
        padding-bottom: 15px;
        margin: 0 15px 15px;
        height: 30px;
        background-color: #f4f4f4;
        line-height: 30px;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        // margin: 0 7.5px;
        font-size: 14px;
        color: #191a1b;
      }
    }
  }
}
</style>